<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动态生成表格</title>
	<script  type='text/javascript'>
		function createTable(rows) {
			removeTable();
			var value = parseInt(rows);
			var t = document.createElement('table');
			for (var i = 0; i < value; i++) {
				var r = t.insertRow();
				for (var j = 0; j < 5; j++) {
					var c = r.insertCell();
					c.innerHTML = i + j;
				}
			}
      
			document.getElementById('table').appendChild(t);
			t.setAttribute('border', '1');
		}

		function removeTable() {
			var elements = document.getElementsByTagName('table');
			for (var i = 0; i < elements.length; i++) {
				elements[i].parentNode.removeChild(elements[i]);
			}
		}

		function find(key) {
			//遍历 table表格 
        	var t = document.getElementsByTagName("table")[0]; //获取第一个表格
        	var arr = new Array();
        	var count = 0;
        	var txt = '';
        	for(var i = 0; i < t.rows.length; i++) {
            	for(var j = 0; j < t.rows[i].cells.length; j++) {
                	arr[count] = t.rows[i].cells[j].innerHTML;
                	count++;
                	txt = txt + '-' + t.rows[i].cells[j].innerHTML;
            	}
        	}

        	document.getElementById('result1').innerHTML = "loop: " + txt;
			document.getElementById('result2').innerHTML = "join: " + arr.join();

        	var counter = 0;
        	for (var i in arr) {
        		if (arr[i] == key) {
        			counter++;
        		}
        	}

        	var p = document.getElementById('result3');
        	p.innerHTML = "find " + counter + " for " + key + " in " + count + "numbers";
		}
	</script>
</head>
<body>
	<div>
		<p>rows: </p>
	</div>
	<div><input type="text" id="num" onkeyup="createTable(this.value)"></div>

	<div id="table"></div>
	<p id="result1"></p>
	<p id="result2"></p>
	<input type="text" id="key" onkeyup="find(this.value)">
	<p id="result3"></p>
</body>
</html>